<template>
  <el-container>
    <el-main class="bg-white ">

      <el-header>
        <div>{{ isEdit?"编辑":"新增" }}<span class="blue">{{ form.Name }}</span></div>

      </el-header>
      <el-main class="main-full-height " style="overflow:hidden">
        <el-steps :active="stepActive" simple align-center finish-status="success">
          <el-step title="基础信息设置">
            <template slot="title">
              <div @click="stepActive=0">基础信息设置</div>
            </template>
          </el-step>
          <el-step title="流程字段设置">
            <template slot="title">
              <div @click="stepActive=1">流程字段设置</div>
            </template>
          </el-step>
          <el-step title="审批流程设置">
            <template slot="title">
              <div @click="stepActive=2">审批流程设置</div>
            </template>
          </el-step>
          <el-step title="打印设置">
            <template slot="title">
              <div @click="stepActive=3">打印设置</div>
            </template>
          </el-step>
        </el-steps>
        <el-divider />
        <el-row v-if="stepActive==0">
          <el-col :span="12" :offset="6">
            <el-form ref="form" :model="form" label-width="120px">
              <el-form-item label="流程类型">
                <el-select v-model="form.DesignType" placeholder="请选择">
                  <el-option v-for="item in selectTypes" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="流程名称">
                <el-input v-model="form.Name" placeholder="请输入流程名称" />
              </el-form-item>
              <el-form-item label="是否启用">
                <el-switch
                  v-model="form.IsEnable"
                />
              </el-form-item>
              <el-form-item label="流程适用范围">
                <el-input placeholder="不选表示全员可用" suffix-icon="el-icon-arrow-right" @focus="showSelectAllInOneDialog()" />
                <el-tag v-for="p in form.Permission" :key="p.Id" size="mini" type="primary">{{ p.Name }}</el-tag>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>

        <el-row v-if="stepActive==1">
          <form-detail ref="formdetail" :is-edit="isEdit" :form-data.sync="form.FormContent" :scheme-type="form.DesignType" />
        </el-row>
        <el-row v-if="stepActive==2">
          <flowSetting ref="flowsetting" :is-edit="isEdit" :flow-data.sync="form.DesignContent" :form-data.sync="form.FormContent" :scheme-type="form.DesignType" />
        </el-row>
        <el-row v-if="stepActive==3">
          <el-container>
            <el-aside>
              <el-header>
                <div>打印设置</div>
              </el-header>
              <el-main />
            </el-aside>
            <el-main class="bg-white" style="height:calc(100vh - 320px);  overflow:scroll;box-shadow:2px 3px 5px #aaa">
              <div class="print-table">
                <div class="triangle-topleft " />
                <pdf
                  v-if="pdfUrl.length>0"
                  ref="pdf"
                  :src="pdfUrl"
                />
              </div>
            </el-main>
          </el-container>
        </el-row>
      </el-main>
      <el-footer>

        <div>
          <el-button v-if="stepActive >0" style="margin-top: 12px;" @click="pre">上一步</el-button>
          <el-button v-if="stepActive <3 " style="margin-top: 12px;" @click="next">下一步</el-button>
          <el-button
            type="primary"
            size="medium"
            @click="onSubmit"
          >保存</el-button>
        </div>
      </el-footer>

    </el-main>

    <selectAllInOne ref="selectallinonedialog" :echo-list="form.Permission" @allSelect="allSelect" />
  </el-container>

</template>
<script>
import pdf from 'vue-pdf'
import selectAllInOne from '@/views/components/permissions/selectpersonroledepartment'
import FormDetail from './formDetail'
import flowSetting from './flowsetting'
import { add, update, previewPdf, Delete } from '@/api/flow/index'
export default {
  components: { pdf, selectAllInOne, FormDetail, flowSetting },
  data() {
    return {
      stepActive: 0, // active
      form: {
        Id: '',
        Name: '',
        UnitId: '',
        DesignType: 0,
        DesignContent: {},
        FormContent: [],
        Permission: [],
        IsEnable: true,
        Remark: '',
        IsDistinctVerifier: false
      },
      selectTypes: [{
        value: 1,
        label: '申请单'
      },
      {
        value: 2,
        label: '报销单'
      }, {
        value: 3,
        label: '借款单'
      }, {
        value: 4,
        label: '对公支付'
      }
      ],
      isEdit: false, // 是否编辑状态
      pdfUrl: ''
    }
  },
  created() {
  },
  methods: {

    loadPdfTemp(type) {
      if (type) {
        previewPdf(type).then(res => {
          this.pdfUrl = res.Data
        })
      }
    },
    reSetForm() {
      this.form = {
        Id: '',
        Name: '',
        UnitId: '',
        DesignType: 0,
        DesignContent: {},
        FormContent: [],
        Permission: [],
        IsEnable: true,
        Remark: '',
        IsDistinctVerifier: false
      }
    },
    chooseBill(row) {
      this.reSetForm()
      this.stepActive = 0
      this.isEdit = true
      this.stepActive = 1
      this.form = Object.assign({}, row)
      this.form.FormContent = JSON.parse(this.form.FormContent)
      this.form.DesignContent = JSON.parse(this.form.DesignContent)
      this.form.Permission = JSON.parse(this.form.Permission)
      this.loadPdfTemp(row.DesignType)
    },
    handleNewBill(c) {
      this.isEdit = false
      this.reSetForm()
      this.stepActive = 0
      this.form.DesignType = c
      this.showBillDefaultName(c)
      this.loadPdfTemp(c)
    },
    onSubmit() {
      if (this.stepActive === 1) {
        this.$refs.formdetail.updateForm()
      }
      if (this.stepActive === 2) {
        var result = this.$refs.flowsetting.updateFlow()
        if (!result) {
          return false
        }
      }
      if (this.form.Name.length < 1) {
        this.$message({
          message: '请输入流程名称',
          type: 'error',
          duration: 3 * 1000
        })
      } else if (this.form.FormContent.length < 1) {
        this.$message({
          message: '请先设计流程表单',
          type: 'error',
          duration: 3 * 1000
        })
      } else if (this.form.DesignContent.length < 1) {
        this.$message({
          message: '请先设计流程流程',
          type: 'error',
          duration: 3 * 1000
        })
      } else {
        var reqdata = Object.assign({}, this.form)
        reqdata.FormContent = JSON.stringify(reqdata.FormContent)
        reqdata.DesignContent = JSON.stringify(reqdata.DesignContent)
        reqdata.Permission = JSON.stringify(reqdata.Permission)
        if (reqdata.Id.length > 0) {
          update(reqdata).then(res => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 3 * 1000
            })
            this.loadBill()
          })
        } else {
          add(reqdata).then(res => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 3 * 1000
            })
            this.loadBill()
          })
        }
      }
    },
    next() {
      if (this.stepActive === 0) {
        if (this.form.Name.length < 1) {
          this.$message({
            message: '请输入流程名称',
            type: 'error',
            duration: 3 * 1000
          })
          return
        }
      }
      if (this.stepActive === 1) {
        this.$refs.formdetail.updateForm()
      }
      if (this.stepActive === 2) {
        var result = this.$refs.flowsetting.updateFlow()
        if (!result) {
          return false
        }
      }
      if (this.stepActive++ > 2) { this.stepActive = 0 }
    },
    pre() {
      if (this.stepActive === 1) {
        this.$refs.formdetail.updateForm()
      }
      if (this.stepActive === 2) {
        var result = this.$refs.flowsetting.updateFlow()
        if (!result) {
          return false
        }
      }
      if (this.stepActive-- < 0) { this.stepActive = 0 }
    },
    showSelectAllInOneDialog() {
      this.$refs.selectallinonedialog.showSelectAllInOneDialog()
    }, // 回调方法
    allSelect(taglist) {
      this.form.Permission = taglist
    },
    delBill(row) {
      var _this = this
      _this.$confirm('确认删除流程模板【' + row.Name + '】吗?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          var paras = row.Id
          Delete(paras).then(res => {
            _this.$message({
              message: res.Msg,
              type: 'success',
              duration: 5 * 1000
            })
            _this.$nextTick(() => {
              _this.loadBill()
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }

}

</script>
<style lang="scss" scoped>
.el-tag{
   margin: 5px;

 }
 .triangle-topleft {
   height: 0;
   width: 0;
   border-top: 80px #ddd solid;
   border-right: 80px transparent solid;
   position: absolute;
 }
 .triangle-topleft::before{
   content: '表单预览';
   transform: rotate(45deg);
   display: block;
    /* width: 100%; */
    margin-top: -80px;
    margin-left: 25px;
    font-size: 10px;
    color: #aaa;
    position:static;
    line-height: 14px;
 }
 .print-table{
 text-align: center;
   .title{
     font-weight: bold;
     font-size: 18px;
     line-height: 100px;

   }
 }
 .modal-item +.modal-item{
   border-top:1px dashed #f1f1f1;
 }
 .el-step.is-simple:not(:last-of-type) .el-step__title{
   max-width: unset !important;;
 }
 .el-step__title{

   &:hover div{
     cursor: pointer;
     transform: scale(1.05,1.05);
     transition-duration: 0.5s;
   }
 }
 </style>
